<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>梅赛德斯-奔驰</title>
    <link rel="icon" href="favicon.ico" type="images/x-ico" />
    <link rel="stylesheet" href="css/01.css">
    <link rel="stylesheet" href="css/02.css">
    <link rel="stylesheet" href="css/common.css">
    
    
    <!-- <link rel="stylesheet" href="css/common.css"> -->
    <script src="js/jquery.min.js"></script>
   
<script>
    // 登录验证
    
    let userName=sessionStorage.getItem("userinfor");
    let passWord=sessionStorage.getItem("password");
    if(!userName&&!passWord){
        location.href=`submit.html`
    }
    // 展示页面信息
    
    console.log(sessionStorage.getItem("userinfor"));
    let inforName=document.querySelector("#userName");
    console.log(inforName)
    console.log( $("header .p1")[0])
    // $("header .p1").html(sessionStorage.getItem("userinfor"))
    // $("#inforName").html(JSON.parse(sessionStorage.getItem("userinfor")))



    window.onload=function(){
        let headli=$(".header-con li");
let temp=$(".header-con #temp");
let tempul=$(".header-con ul")
let tempcon=$("#temp-con")
let arr1=["轿车","SUV","轿跑车&敞篷车","MPV","纯电动车","车型筛选"]
let arr2=["购车新方案","金融服务","在线购车","官方认证二手车","大学生&在线购车"]
let arr3=["服务指南","保养维修及维护","选装配件","EQ客户服务"]
let arr4=["设计美学","SUV","动力与效能科技","智能科技","豪华体验与之制造","奔驰制造"]
let arr5=["品牌天下","品牌互动","客户承诺","企业社会责任","Mercedes me"]
headli.mouseenter(function(){
    temp.slideDown()
    // temp.animate({
    //     opacity:1,
    // })

if(Number($(this).index()+1)===1){
   tempcon.html("")
    for(var i=0;i<6;i++){
        let span=$(" <span></span>");
     
        span.html(arr1[i]).appendTo(tempcon);
     
        span.click(function(){
           if($(this).index()===0){
            location.href="jiaoche.html"
           }
           if($(this).index()===1){
            location.href="list01.html"
           }
            
         
      })
       
    }
 
    
}

if(Number($(this).index()+1)===2){
   tempcon.html("")
    for(var i=0;i<5;i++){
     
        let span=$(" <span></span>");
        span.html(arr2[i]).appendTo(tempcon);
        span.click(function(){
           if($(this).index()===2){
            location.href="gouche.html"
           }
            
         
      })
    }
 
    
}
if(Number($(this).index()+1)===3){
   tempcon.html("")
    for(var i=0;i<4;i++){
     
        let span=$(" <span></span>");
        span.html(arr3[i])
        span.appendTo(tempcon)
        
    }
 
    
}
if(Number($(this).index()+1)===4){
   tempcon.html("")
    for(var i=0;i<6;i++){
     
        let span=$(" <span></span>");
        span.html(arr4[i])
        span.appendTo(tempcon)
    }
 
    
}
if(Number($(this).index()+1)===5){
   tempcon.html("")
    for(var i=0;i<5;i++){
     
        let span=$(" <span></span>");
        span.html(arr5[i])
        span.appendTo(tempcon)
    }
 
    
}


// if($(this).index())
  
})
tempul.mouseleave(function(){
  temp.slideUp()
      
    })
    var tit=document.querySelector("header");
    var titop=tit.offsetTop;
    window.onscroll=function(){
        var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
        if(scrolltop>titop){
            tit.className="fix";
        }
        else{
            tit.className=""
        }
    }

    }
</script>
    
 
  
   
    <!-- <script>
        window.onload=function(){
    var tit=document.querySelector("header");
    var titop=tit.offsetTop;
    window.onscroll=function(){
        var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
        if(scrolltop>titop){
            tit.className="fix";
        }
        else{
            tit.className=""
        }
    }
}
    </script> -->
   
</head>


<body>
  
        <header id="head">
            <header class="header-con">
                <div class="left">
                    <img src="img/logo.png" alt="">
                </div>
                <div class="center">
                    <ul>
                        <li>车型</li>
                        <li>购车指南</li>
                        <li>客户服务</li>

                        <li>Mercedes me</li>
                        <li>梅赛德斯-AMG</li>
                        <div id="temp">
                                <div id="temp-con"></div>
        
                            </div>
                    </ul>
                    
                </div>
                <div class="right">
                    <p class="p1"  id="userName" style="color:#fff; width: 110px;
                    height: 30px;" >
                    fdasnjklsdl
                        <!-- <span id="inforName" style="padding: 20px">
                            <! <a href="zhuce.html" >注册</a> -->
                        <!-- </span> -->
                        <!-- <span style="display: none"> -->
                            <!-- <a href="submit.html">登录</a> -->
                        <!-- </span> --> 

                    </p>
                    <p class="p2">
                        <span>EQ</span>
                        <span></span>
                    </p>
                </div>
            </header>
        </header>
        <main>


            <!-- 轮播图 -->
            <div id="wrap">
                    <ul id="imgWrap">
                        <li class="show">
                            <img src="img/img01.jpg" alt="">
                        </li>
                        <li>
                            <img src="img/img02.jpg" alt="">
                        </li>
                        <li>
                            <img src="img/img03.jpg" alt="">
                        </li>
                        <li>
                            <img src="img/img04.jpg" alt="">
                        </li>
    
                    </ul>
                    <img src="img/l.png" alt="" id="prev">
                    <img src="img/r.png" alt="" id="next">
    
                </div>
            <!-- 购车工具-->
            <div id="buycar">
                <div class="con">
                    <div class="con1">
                        <span>购车工具</span>
                    </div>
                    <div class="con2">
                        <div class="con21">
                            <span>
                                <img src="img/icon01.gif" alt="">
                            </span>
                            <span>查找经销商</span>
                        </div>
                        <div class="con22">
                            <img src="img/icon02_03.gif" alt="">
                            </span>
                            <span>车型比较</span>
                        </div>
                        <div class="con23">
                            <img src="img/icon03_03.gif" alt="">
                            </span>
                            <span>预约考试</span>
                        </div>
                        <div class="con24">
                            <img src="img/icon04_03.gif" alt="">
                            </span>
                            <span>在线购车</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 全部车型· -->
            <div id="allcar">
                <div class="con">
                    <div class="con1">
                        <span>全部车型</span>
                    </div>
                    <div class="con2">
                        <img src="img/duotu.jpg" alt="">
                        <ul>
                            <li class="item1">
                                <span>轿车</span>
                            </li>
                            <li class="item1">
                                <span>SUV</span>
                            </li>
                            <li class="item1">
                                <span>敞篷跑车</span>
                            </li>
                            <li class="item1">
                                <span>MpV</span>
                            </li>
                            <li class="item1">
                                <span>纯电动车</span>
                            </li>

                        </ul>
                    </div>

                </div>
            </div>
            <!-- 发现更多 -->
            <div id="findmore">
                <div class="con">
                    <div class="con1">
                        <span>发现更多</span>
                    </div>
                    <!-- box1 -->
                    <div class="box1">
                        <img src="img/datu01.jpg" alt="">
                        <div class="xianshi">
                            <span class="span1">限时购车新方案</span>
                            <div class="xianshi01">
                                <p class="span2">限时购车新方案</p>
                                <p>别故，迎新。多种优享方案，助你轻松拥有一辆梅赛德斯-奔驰。</p>
                                <a href="#">>了解更多</a>
                            </div>

                        </div>
                        <div class="xianshi02"></div>
                    </div>
                    <!-- box2 -->
                    <div class="box2">
                        <div class="box2-left">
                            <img src="img/left.jpg" alt="">
                            <p class="title01">加入She's Mercedes</p>
                            <div class="title02">
                                <p class="p1">加入She's Mercedes</p>
                                <p class="p2">发出你的声音, 唤醒女性力量。</p>
                                <a href="#">>了解更多</a>

                            </div>
                            <div class="title03">

                            </div>
                        </div>
                        <div class="box2-right">
                            <img src="img/right.jpg" alt="">
                            <p class="title11">Mercedes me 车主俱乐部</p>
                            <div class="title12">
                                <p class="p1">Mercedes me 车主俱乐部</p>
                                <p class="p2">携手跨行业合作伙伴为会员打造优质的用车体验和多方位的生活关怀。</p>
                                <a href="#">>了解更多</a>

                            </div>
                            <div class="title13">

                            </div>
                        </div>
                    </div>
                    <!-- box3 -->
                    <div class="box3">
                        <img src="img/box03.jpg" alt="">
                        <p class="title31">认证二手车</p>
                        <div class="title32">
                            <p class="p1">认证二手车</p>
                            <p class="p2">真相如新，放心奔驰</p>
                            <a href="#">>了解更多</a>

                        </div>
                        <div class="title33">

                        </div>

                    </div>
                    <!-- box04 -->
                    <div class="box04">
                        <img src="img/box04.jpg" alt="">
                        <p class="title41">并肩前行，2019赛季F1世界锦标赛</p>
                        <div class="title42">
                            <p class="p1">并肩前行，2019赛季F1世界锦标赛</p>
                            <p class="p2">梅赛德斯-AMG马石油车队, 2019赛季征战传奇！</p>
                            <a href="#">>了解更多</a>

                        </div>
                        <div class="title43">

                        </div>

                    </div>
                    <!-- box5 -->
                    <div class="box5">
                        <div class="box5-left">
                            <img src="img/box51.jpg" alt="">
                            <p class="title51">从新认识奔驰</p>
                            <div class="title52">
                                <p class="p1">从新认识奔驰</p>
                                <p class="p2">梅赛德斯-奔驰秘籍，助你成为高手。</p>
                                <a href="#">>了解更多</a>

                            </div>
                            <div class="title53">

                            </div>
                        </div>
                        <div class="box5-right">
                            <img src="img/box52.jpg" alt="">
                            <p class="title511">了解更多</p>
                            <div class="title512">

                                <a href="#">>了解更多</a>

                            </div>
                            <div class="title513">

                            </div>
                        </div>
                    </div>
                    <!-- box06 -->
                    <div class="box06">
                        <img src="img/box06.jpg" alt="">
                        <p class="title61">无畏共联盟</p>
                        <div class="title62">
                            <p class="p1">无畏共联盟</p>
                            <p class="p2">全新GLA SUV 携手2020英雄联盟全球总决赛，所向无前</p>
                            <a href="#">>了解更多</a>

                        </div>
                        <div class="title63">

                        </div>

                    </div>






                </div>
            </div>
        </main>
        <!-- foot -->
        <footer id="foot">
            
                <div class="foot-con">

                        <div class="left">
                            <ul class="u1">
                                <li>
                                    <a href="#">隐私协议</a>
                                </li>
                                <li>
                                    <a href="#">用户协议</a>
                                </li>
                                <li>
                                    <a href="#">投诉电话</a>
                                </li>
                                <li>
                                    <a href="#">网站地图</a>
                                </li>
                                <li>
                                    <a href="#">法律神明</a>
                                </li>
                                <li>
                                    <a href="#">环保信息查询</a>
                                </li>
                                <li>
                                    <a href="#">供应商平台</a>
                                </li>
                                <li style="padding: 0px">
                                    <a href="#">腾势官网</a>
                                </li>
                            </ul>
                            <ul class="u2">
                                <li>©梅赛德斯-奔驰版权所有</li>
                                <li>京ICP备09046804号-2</li>
                                <li>京公网安备 11010502035702号</li>
                            </ul>
                        </div>
                        <div class="right">
                            <ul class="u1">
                                <li class="logo01">官方在线展厅</li>
                                <li class="logo02">官方应用</li>
                                <li class="logo03">官方微信</li>
                                <li class="logo04">天猫官方旗舰店</li>
                                <li class="logo05">官方微博</li>
                                <li class="logo06">官方微博</li>
                            </ul>
        
                        </div>
                    </div>
                
            </div>
        </footer>
      

      

</body>

</html>
<script>
   $("#head .p1").html(sessionStorage.getItem("userinfor"))
</script>

    <script src="js/01.js"></script>





